<template>
  <div class="data-collection">
    <div class="data-collection-header">
      <Search placeholder="大数据" search-align="center" @search-enter="searchEnter"></Search>
      <div class="collection-radio">
        <el-radio-group v-model="sortMethod">
          <el-radio label="默认排序">默认排序</el-radio>
          <el-radio label="发布时间排序">发布时间排序</el-radio>
          <el-radio label="浏览人数最多">浏览人数最多</el-radio>
          <el-radio label="收藏数最多">收藏数最多</el-radio>
          <el-radio label="下载数最多">下载数最多</el-radio>
        </el-radio-group>
      </div>
      <div class="collection-checkbox">
        <el-checkbox-group v-model="formatList">
          <el-checkbox label="excel"></el-checkbox>
          <el-checkbox label="txt"></el-checkbox>
          <el-checkbox label="jpg"></el-checkbox>
          <el-checkbox label="png"></el-checkbox>
          <el-checkbox label="gif"></el-checkbox>
          <el-checkbox label="word"></el-checkbox>
          <el-checkbox label="pdf"></el-checkbox>
          <el-checkbox label="ppt"></el-checkbox>
          <el-checkbox label="avi"></el-checkbox>
          <el-checkbox label="mp4"></el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <div class="data-collection-option">
      <el-button>批量下载</el-button>
    </div>
    <div class="data-collection-content">
      <Table
        :table-column="tableColumn"
        :table-data="tableData"
        :has-selection="true"
        @select-change="handleSelectChang"
      >
        <!-- <template slot="format" slot-scope="{ row }"> 这样就可以拿到当前行的数据了 -->
        <template slot="format">
          <span>假装这是一张图片</span>
        </template>
        <template slot="option">
          <el-button type="text">按钮</el-button>
        </template>
      </Table>
    </div>
  </div>
</template>

<script>
import Table from "@/layout/component/table.vue"
import Search from "@/layout/component/search.vue"
export default {
  components: { Table, Search },
  data() {
    return {
      tableColumn: [
        {
          label: '格式',
          align: 'center',
          slot: 'format'
        },
        {
          label: '题名',
          prop: 'title',
          align: 'center',
          width: 260
        },
        {
          label: '作者',
          prop: 'author',
          align: 'center'
        },
        {
          label: '发表时间',
          prop: 'sendTime',
          align: 'center',
          isTooltip: true
        },
        {
          label: '收藏',
          prop: 'collect',
          align: 'center'
        },
        {
          label: '下载',
          prop: 'download',
          align: 'center'
        },
        {
          label: '操作',
          align: 'center',
          slot: 'option'
        }
      ],
      tableData: [
        {
          title: '大数据与物联网',
          author: '网络作者',
          sendTime: '2022-04-31 14:32:30',
          collect: '3',
          download: '0'
        },
        {
          title: '大数据与物联网',
          author: '网络作者',
          sendTime: '2022-04-31 14:32:30',
          collect: '3',
          download: '0'
        },
        {
          title: '大数据与物联网',
          author: '网络作者',
          sendTime: '2022-04-31 14:32:30',
          collect: '3',
          download: '0'
        },
        {
          title: '大数据与物联网',
          author: '网络作者',
          sendTime: '2022-04-31 14:32:30',
          collect: '3',
          download: '0'
        },
        {
          title: '大数据与物联网',
          author: '网络作者',
          sendTime: '2022-04-31 14:32:30',
          collect: '3',
          download: '0'
        },
        {
          title: '大数据与物联网',
          author: '网络作者',
          sendTime: '2022-04-31 14:32:30',
          collect: '3',
          download: '0'
        },
        {
          title: '大数据与物联网',
          author: '网络作者',
          sendTime: '2022-04-31 14:32:30',
          collect: '3',
          download: '0'
        },
        {
          title: '大数据与物联网',
          author: '网络作者',
          sendTime: '2022-04-31 14:32:30',
          collect: '3',
          download: '0'
        },
        {
          title: '大数据与物联网',
          author: '网络作者',
          sendTime: '2022-04-31 14:32:30',
          collect: '3',
          download: '0'
        },
        {
          title: '大数据与物联网',
          author: '网络作者',
          sendTime: '2022-04-31 14:32:30',
          collect: '3',
          download: '0'
        },
        {
          title: '大数据与物联网',
          author: '网络作者',
          sendTime: '2022-04-31 14:32:30',
          collect: '3',
          download: '0'
        },
        {
          title: '大数据与物联网',
          author: '网络作者',
          sendTime: '2022-04-31 14:32:30',
          collect: '3',
          download: '0'
        },
        {
          title: '大数据与物联网',
          author: '网络作者',
          sendTime: '2022-04-31 14:32:30',
          collect: '3',
          download: '0'
        },
        {
          title: '大数据与物联网',
          author: '网络作者',
          sendTime: '2022-04-31 14:32:30',
          collect: '3',
          download: '0'
        },
        {
          title: '大数据与物联网',
          author: '网络作者',
          sendTime: '2022-04-31 14:32:30',
          collect: '3',
          download: '0'
        }
      ],
      sortMethod: '默认排序',
      formatList: []
    };
  },
  methods: {
    handleSelectChang(list) {
      console.log(list, '当前选中')
    },
    searchEnter(val) {
      console.log(val);
    }
  }
}
</script>

<style scoped>
.data-collection {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.data-collection-header {
  background-color: #116bf7;
  padding-top: 20px;
}
.data-collection-option {
  text-align: right;
  padding: 10px 0;
}
.data-collection-content {
  flex: 1;
}
.collection-radio, .collection-checkbox  {
  padding: 20px;
  position: relative;
}
.collection-radio::before {
  content: '';
  position: absolute;
  width: 80%;
  height: 2px;
  background: #fff;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 0;
}
.collection-radio >>> .el-radio-group, .collection-checkbox >>> .el-checkbox-group {
  display: flex;
}
.collection-radio >>> .el-radio, .collection-checkbox >>> .el-checkbox {
  flex: 1;
  margin-left: 20px;
}
.collection-radio >>> .el-radio__label, .collection-radio >>> .el-radio__input.is-checked+.el-radio__label,
.collection-checkbox >>> .el-checkbox__label, .collection-checkbox >>> .el-checkbox__input.is-checked+.el-checkbox__label {
  color: #c6daf1;
  font-weight: normal;
}
.collection-radio >>> .is-checked .el-radio__inner, 
.collection-checkbox >>> .is-checked .el-checkbox__inner {
  background: #dcb03c;
  border-color: #dcb03c;
}
</style>